<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<!-- 导入样式 -->
<link rel="stylesheet" type="text/css"
	href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header" id="header">
			<!-- 头部区域（可配合layui已有的水平导航） -->
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll" id="left">
				<!-- 左侧导航 通过jquery加载-->
			</div>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<fieldset class="layui-elem-field layui-field-title site-title">
				<legend>
					<a name="compatibility">超市订单管理系统</a>
				</legend>
			</fieldset>
			<!-- 放一个表格容器 -->
			<table id="demo" lay-filter="demo"></table>

			<!-- 修改表单 -->
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">商品编码</label>
					<div class="layui-input-block">
						<input type="text" name="billCode" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商品名称</label>
					<div class="layui-input-block">
						<input type="text" name="productName" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商品描述</label>
					<div class="layui-input-block">
						<input type="text" name="productDesc" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商品单位</label>
					<div class="layui-input-block">
						<input type="text" name="productUnit" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item" style="display: none">
					<label class="layui-form-label">ID</label>
					<div class="layui-input-block">
						<input type="text" name="id" class="layui-input" disabled>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo" >立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>


			<!-- 数据表格工具条 -->
			<div id="tools" style="display:none;">
				<button id="quanxuan" class="layui-btn layui-btn-warm layui-btn-xs">全选</button>
				<button id="fanxuan" class="layui-btn layui-btn-xs">反选</button>
				<button id="shanchu" class="layui-btn layui-btn-xs">删除</button>
				<div class="layui-input-inline">
					<input type="text" name="search" class="layui-input" />
				</div>
				<button id="sousuo" class="layui-btn layui-btn-danger layui-btn-xs">搜索</button>
			</div>

			<!-- 表格行工具按钮 -->
			<div id="gj" style="display:none;">
				<button class="layui-btn layui-btn-danger layui-btn-xs"
					lay-event="del">删除</button>
				<button class="layui-btn layui-btn-xs" lay-event="edit" name="edits">修改</button>
			</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© layui.com - 底部固定区域
		</div>
	</div>
	<script src="https://www.layuicdn.com/layui/layui.all.js"></script>

	<script type="text/javascript">
		layui.use([ 'jquery', 'element', 'table', 'form', 'layer' ], function() {
			var table = layui.table;
			var $ = layui.jquery;
			var form = layui.form;
			var layer = layui.layer;
			var element=layui.element;
			
			initloadLeftTop(element);
			//加载数据表格
			loadTable(table);
			//注册头部工具栏
			tableHeadTool(table);
			//注册行工具事件
			rowTools(table);
			//监听表单事件
			formSubmit(form);
	
		});//layui.use结束
		
		
		function initloadLeftTop(element) {
			//载入头部工具条
			$.post('header.jsp', {}, function(data) {
				$("#header").html(data);
				element.init();//用于菜单之类是后面加载的，需要重新刷新，这样动画才能生效
			}, 'text');
			//载入左侧导航栏
			$.post('left.jsp', {}, function(data) {
				$("#left").html(data);
				element.init();//用于菜单之类是后面加载的，需要重新刷新，这样动画才能生效
			}, 'text');
		};
		
		
		function loadTable(table){
			 //创建表格参数
			var obj = {
				elem: '#demo'  //id选择器
			   ,url: '/shiro_Bill/loadLayuiTable'   //数据接口,某个Controller
			   ,page: true //开启分页
			   ,toolbar:'#tools' //开启头部工具条
			   ,limit:5  //每页显示多少条
			   ,cols: [[ //表头  表格的标题列
			   		{type:'checkbox'}
				   ,{field: 'id', title: '编号',width:70}
				   ,{field: 'billCode', title: '编码'}
		     	   ,{field: 'productName', title: '订单名称'}
		     	   ,{field: 'productDesc', title: '订单描述'}
		     	   ,{field: 'productUnit', title: '单位'}
		     	   ,{field: 'productCount', title: '数量'}
		     	   ,{field: 'totalPrice', title: '总计'}
		     	   ,{field: 'isPayment', title: '是否支付'}
		     	   ,{field: 'createdBy', title: '创建'}
		     	   ,{field: 'creationDate', title: '创建时间'}
		     	   ,{field: 'providerId', title: '修改者'}
		     	   ,{toolbar:'#gj',title:'操作'}  //添加行工具
		     	   
			   ]]
			};
			//加载表格
			table.render(obj);
		};
		
		//注册头工具事件
		function tableHeadTool(table){
		    $("#sousuo").click(function(){
		    	//得到文本框
		    	var name = $("input[name=search]").val();
		    	
		    	//直接调用表格的reload方法 他会帮你发送ajax请求与拼接表格
		    	table.reload('demo',{
		    		url:'/shiro_Bill/loadLayuiTable',
		    		where:{'productName':name ,'page':1}
		    	});
		    	
		    	//重新加载页面
		    	//window.location.reload(true);
		    	
		    });
		}
		
		//注册行工具事件
		function rowTools(table){
			table.on('tool(demo)', function(obj){
			 var data = obj.data;  //将行的数据进行赋值
			 if(obj.event === 'del'){ //点了删除按钮
			 	//alert(data.id + ","+data.username);   //得到行的数据，发送ajax
			 	$.post("/shiro_Bill/deleteBillRow",data.id,function(data){
			 		if(data=="seccess"){
			 			layer.msg("删除成功！",{'icon':6})
				 			table.reload('demo',{
				    		url:'/shiro_Bill/loadLayuiTable',
				    		where:{'productName':name ,'page':1}
				    		});
			 		}else{
			 			layer.msg("权限不够，删除失败！或不是特定的角色！",{'icon':5})
			 		}
			 	},"text");
			 }else if(obj.event === 'edit'){
			 	//点击行工具修改，将数据加载到表单
			 	$("input[name=billCode]").val(data.billCode);
			 	$("input[name=productName]").val(data.productName);
			 	$("input[name=productDesc]").val(data.productDesc);
			 	$("input[name=productUnit]").val(data.productUnit);
			 	$("input[name=id]").val(data.id);
				 }
			});
		}
	
	
		function formSubmit(form) {
			form.on('submit(formDemo)', function(data) {
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				//得到所有的文本框
				var id = data.field.id;
				var billCode = data.field.billCode;
				var productName = data.field.productName;
				var productDesc = data.field.productDesc;
				var productUnit = data.field.productUnit;
				//拼接数据
				var obj = {
					"id" : id,
					"billCode" : billCode,
					"productName" : productName,
					"productDesc" : productDesc,
					"productUnit" : productUnit
				};
				//发送ajax请求
				$.post('/shiro_Bill/updateBill', obj, function(data) {
					layer.alert(data);
				}, 'text');
	
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
	
		}
	</script>
</body>
</html>